<template>
    <div>
       <div>
            <table>
                <tr>
                    <td class="title1">专业名称：</td>
                    <td class="cont1">供电专业</td>
                    <td></td>
                    <td class="title1">科室名称：</td>
                    <td class="cont1">供电技术科</td>
                </tr>
                <tr>
                    <td class="title1">绝缘工具名称：</td>
                    <!-- <td><a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      请选择
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="javascript:;">绝缘手套</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">验电器</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">接地杆</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown></td> -->
  <a-dropdown>
            <template #overlay>
                <a-menu @click="handleMenuClick">
                <a-menu-item key="1">
                    绝缘手套
                </a-menu-item>
                <a-menu-item key="2">
                    接地杆
                </a-menu-item>
                <a-menu-item key="3">
                    验电器
                </a-menu-item>
                </a-menu>
            </template>
            <a-button>
                请选择
                <DownOutlined />
            </a-button>
        </a-dropdown>
                    <!-- <td></td> -->
                    <td></td>
                    <td><button class="button1">查询</button></td>
                </tr>
                <tr>
                    <td></td>       
                    <td></td>
                    <td><button class="button1" @click="handleAddClick">新增</button></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
       </div>
       <div>
        <a-table :data-source="data">
            <a-table-column key="jueyuangongju" title="绝缘工具" data-index="jueyuangongju" />
            <a-table-column-group>
                <template #title>电器试验标准</template>
                <a-table-column key="gongzuodianya" title="工作电压(kv)" data-index="gongzuodianya" />
                <a-table-column-group>
                    <template #title>交流实验电压</template>
                    <a-table-column key="shiyandianya" title="试验电压(kv)" data-index="shiyandianya" />
                    <a-table-column key="shiyanchangdu" title="试验长度(m)" data-index="shiyanchangdu" />
                </a-table-column-group>
                <a-table-column key="shiyanchixushijian" title="试验持续时间（分）" data-index="shiyanchixushijian" />
                <a-table-column key="shiyanzhouqi" title="试验周期（月）" data-index="shiyanzhouqi" />
            </a-table-column-group>
            <a-table-column key="danwei" title="单位" data-index="danwei" />
            <a-table-column key="yongtu" title="用途" data-index="yongtu" />
            <a-table-column key="beizhu" title="备注" data-index="beizhu" />
            <!-- <a-table-column key="caozuo" title="操作">
            <template>
                <a-button type="primary">编辑</a-button>
                <a-button type="">删除</a-button>
            </template>
            </a-table-column> -->
            
            <a-table-column key="action" title="操作">
            <template #default="{}">
                <span>
                <!-- <a>{{ record.key }}</a> -->
                <a-divider type="vertical" />
                <a-button class="button1" >编辑</a-button>
                <a-button class="button1">删除</a-button>
                </span>
            </template>
            </a-table-column>
        </a-table>
        <Modal ref="modalRef" @load-data="loadData"></Modal>
       </div>
    </div>
    
</template>

<script setup>
// import { defineComponent } from 'vue';
import { onMounted,ref } from 'vue'
import request from '@/utils/request'
import Modal from './Modal.vue'
import { DownOutlined } from '@ant-design/icons-vue';
const modalRef = ref(null)

const handleAddClick = () => {
  modalRef.value.showModal()
}
const loadData = async () => {
  const result = await request({
    url: '/banner/list',
  })
  console.log(result)
  data.value = result.data.data
}
// const confirm = bannerid => {
//   request({
//     url: '/banner/delete',
//     data: {
//       bannerid
//     }
//   }).then(result => {
//     loadData()
//   })
// };
// const cancel = e => {
// };

onMounted(async () => {
  loadData()
})
const data = [{
  key: '1',
  jueyuangongju:'验电器',
  gongzuodianya:380,
  shiyandianya:220,
  shiyanchangdu:60,
  shiyanchixushijian:15,
  shiyanzhouqi:3,
  danwei:'郑州供电段',
  yongtu:'检测是否有电',
  beizhu:'正常',
}, {
  key: '2',
  jueyuangongju:'绝缘手套',
  gongzuodianya:220,
  shiyandianya:220,
  shiyanchangdu:60,
  shiyanchixushijian:15,
  shiyanzhouqi:3,
  danwei:'开封供电段',
  yongtu:'隔绝电压',
  beizhu:'正常',
},{
  key: '3',
  jueyuangongju:'接地杆',
  gongzuodianya:380,
  shiyandianya:220,
  shiyanchangdu:60,
  shiyanchixushijian:15,
  shiyanzhouqi:3,
  danwei:'许昌供电段',
  yongtu:'接地',
  beizhu:'正常',
}];

// export default defineComponent({
    
  // setup() {
    const handleMenuClick = e => {
      console.log('click', e);
    };
    // return {
    //   data,
    //   handleMenuClick
    // };
  // },
// });    
</script>

<style scoped>
.title1{
    font-size: 24px;
    font-weight:bold ;
}
.cont1{
    font-size: 24px;  
}
.button1{
    background-color: #1890FF;
    border:1px solid #fff;
    color: #fff;
    width: 100px;
    height: 40px;
    font-size: 15px;
    cursor: pointer;
}
</style>